<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_jQuery-实现计数器</title>
</head>

<body>

  <button class="sub">-</button>
  <span class="counter">0</span>
  <button class="add">+</button>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>

    // 1.监听文档完全解析完成
    // document.addEventListener('DOMContentLoaded', function () {
    //   var subEl = document.querySelector('.sub')
    //   var spanEl = document.querySelector('.counter')
    //   var addEl = document.querySelector('.add')
    //   var counter = 0
    //   subEl.addEventListener('click', function () {
    //     spanEl.innerText = --counter
    //   })
    //   addEl.addEventListener('click', function () {
    //     spanEl.innerText = ++counter
    //   })
    // })
  </script>
  <script>
    // 1. 获取元素
    var sub = $('.sub')
    var counter = $('.counter')
    var add = $('.add')

    // 2. 绑定事件
    sub.on('click', function () {
      // 2.1 获取当前计数器的值
      var current = counter.html()
      // 2.2 将当前计数器的值转换为数字
      var num = parseInt(current)
      // 2.3 将数字减1
      num--
      // 2.4 将减1后的数字重新赋值给计数器
      counter.text(num)
    })

    add.on('click', function () {
      // 2.1 获取当前计数器的值
      var current = counter.html()
      // 2.2 将当前计数器的值转换为数字
      var num = parseInt(current)
      // 2.3 将数字加1
      num++
      // 2.4 将加1后的数字重新赋值给计数器
      counter.text(num)
    })
  </script>

</body>

</html>